<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数组表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
	<!-- 搜索条件开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	  <legend>查询条件</legend>
	</fieldset>
	<form action="" class="layui-form" method="post">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">编号:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="id"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">用户名:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="username"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		     <div class="layui-inline">
		      <label class="layui-form-label">邮箱:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="email"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		 </div>
		 <div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">开始时间:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="startTime" id="startTime"  readonly="readonly" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">结束时间:</label>
		      <div class="layui-input-inline">
		        <input type="text" name="endTime" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		     <div class="layui-inline">
		      <label class="layui-form-label">性别:</label>
		      <div class="layui-input-inline">
		        <input type="radio" name="sex" value="1" title="男">
				<input type="radio" name="sex" value="0" title="女">
		      </div>
		    </div>
		 </div>
		 <div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button>
		    </div>
		  </div>
	</form>
	
	<!-- 搜索条件结束 -->


	<!-- 数据表格开始 -->
	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
	<div style="display: none;" id="userToolBar">
		    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
		    <button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
	</div>
	<div  id="userBar" style="display: none;">
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</div>
	<!-- 数据表格结束 -->

	<!-- 添加和修改的弹出层开始 -->
	<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
		<form class="layui-form " action="" lay-filter="dataFrm" id="dataFrm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">编号:</label>
					<div class="layui-input-inline">
						<input type="text" name="id"  lay-verify="required" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">用户名:</label>
					<div class="layui-input-inline">
						<input type="text" name="username" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">邮箱:</label>
					<div class="layui-input-inline">
						<input type="text" name="email"  lay-verify="required|email" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">城市:</label>
					<div class="layui-input-inline">
						<input type="text" name="city" lay-verify="required" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-inline">
						 <input type="radio" name="sex" value="1" checked="checked" title="男">
						 <input type="radio" name="sex" value="0" title="女">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
		      <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
		    </div>
		  </div>
		</form>

	</div>
	<!-- 添加和修改的弹出层结束 -->

	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'jquery', 'layer', 'form', 'table','laydate' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var laydate=layui.laydate;

			//绑定时间选择器
			laydate.render({
				elem:'#startTime'
			});
			laydate.render({
				elem:'#endTime'
			})


			//渲染数据表格
			var tableIns=table.render({
				 elem: '#userTable'   //渲染的目标对象
			    ,url:'resources/json/users.json' //数据接口
			    ,title: '用户数据表'//数据导出来的标题
			    ,toolbar:"#userToolBar"   //表格的工具条
			    ,height:'full-300'
			    ,cellMinWidth:100 //设置列的最小默认宽度
			    ,done:function(res, curr, count){

			    }
			    ,page: true  //是否启用分页
			    ,cols: [[   //列表数据
			     {type: 'checkbox', fixed: 'left'}
			      ,{field:'id', title:'ID', sort:true}
			      ,{field:'username', title:'用户名', sort:true,align:'center'}
			      ,{field:'email', title:'邮箱', align:'center',  templet: function(res){
			        return '<em>'+ res.email +'</em>'
			      }}
			      ,{field:'sex', title:'性别',align:'center',templet:function(d){
			    	  return d.sex=='1'?'男':'女';
			      }}
			      ,{field:'city', title:'城市',align:'center'}
			      ,{fixed: 'right', title:'操作', toolbar: '#userBar', width:220,align:'center'}
			    ]]
			})


			//监听头部工具栏事件
			table.on("toolbar(userTable)",function(obj){
				 switch(obj.event){
				    case 'add':
				      openAddUser();
				    break;
				    case 'batchDelete':
				      layer.msg('批量删除');
				    break;
				  };
			})

			//监听行工具事件
		   table.on('tool(userTable)', function(obj){
			   var data = obj.data; //获得当前行数据
			   var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  if(layEvent === 'del'){ //删除
				 layer.msg("删除");
			     layer.confirm('真的删除行么', function(index){
			       layer.close(index);
			       //向服务端发送删除指令
			     });
			   } else if(layEvent === 'edit'){ //编辑
				   openUpdateUser(data);
			   }
			 });

			var url;
			var mainIndex;
			//打开添加页面
			function openAddUser(){
				mainIndex=layer.open({
					type:1,
					title:'添加用户',
					content:$("#saveOrUpdateDiv"),
					area:['800px','400px'],
					success:function(index){
						//清空表单数据
						$("#dataFrm")[0].reset();
						url="user/addUser.action";
					}
				});
			}
			//打开修改页面
			function openUpdateUser(data){
				mainIndex=layer.open({
					type:1,
					title:'修改用户',
					content:$("#saveOrUpdateDiv"),
					area:['800px','400px'],
					success:function(index){
						form.val("dataFrm",data);
						url="user/updateUser.action";
					}
				});
			}
			//保存
			form.on("submit(doSubmit)",function(obj){
				//序列化表单数据
				var params=$("#dataFrm").serialize();
				$.post("index.jsp",params,function(obj){
					layer.msg(obj);
					//关闭弹出层
					layer.close(mainIndex)
					//刷新数据 表格
					tableIns.reload();
				})
			});
		});
	</script>
</body>
</html>